<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://codepen.io/prvnbist/pen/gKParr</title>
    <style type="text/css">

        html, body {
            height: 100%;
        }

        body {
            display: grid;
            font-family: Avenir, sans-serif;
            color: #111;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .cta {
            position: relative;
            margin: auto;
            padding: 19px 22px;
            transition: all 0.2s ease;
        }
        .cta:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            border-radius: 28px;
            background: rgba(255, 171, 157, 0.5);
            width: 56px;
            height: 56px;
            transition: all 0.3s ease;
        }
        .cta span {
            position: relative;
            font-size: 16px;
            line-height: 18px;
            font-weight: 900;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            vertical-align: middle;
        }
        .cta svg {
            position: relative;
            top: 0;
            margin-left: 10px;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke: #111;
            stroke-width: 2;
            transform: translateX(-5px);
            transition: all 0.3s ease;
        }
        .cta:hover:before {
            width: 100%;
            background: #ffab9d;
        }
        .cta:hover svg {
            transform: translateX(0);
        }
        .cta:active {
            transform: scale(0.96);
        }
    </style>
</head>
<body type="pug">
<!-- Inspiration: https://dribbble.com/shots/4397812-Click-Me -->

<a href="#" class="cta">
    <span>Click me</span>
    <svg width="13px" height="10px" viewBox="0 0 13 10">
        <path d="M1,5 L11,5"></path>
        <polyline points="8 1 12 5 8 9"></polyline>
    </svg>
</a>
<script>

</script>
</body>
</html>